<template>
<div class>
  <head title="Delivery time"></head>
  <div class="wrapper">
    <div class="locationBox">
      <text class="meth_title">Pick-up time</text>
      <div class="meth_right">
        <input class="timeInput" type="time" v-model="startTime" />
        <text class="line">-</text>
        <input class="timeInput" type="time" v-model="endTime" />
      </div>
    </div>
    <div class="locationBox">
      <text class="meth_title">Delivery time</text>
      <div class="meth_right">
        <input class="timeInput" type="time" v-model="startTime1" />
        <text class="line">-</text>
        <input class="timeInput" type="time" v-model="endTime1" />
      </div>
    </div>
  </div>
  <text class="sureBtn" @click="confirm">Confirm</text>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import asCore from "../../../mixin/core";
import { edit_users_info } from "../../../mixin/ajax.js";
export default {
  data() {
    return {
      //是否显示遮罩层
      showMask: false,
      startTime: "",
      startTime1: "",
      endTime: "",
      endTime1: "",
      selectTime: "",
      selectTYpe: "",
      user: {
        take_time: "",
        receive_time: ""
      },
      shippWay: ["13:00 - 14:00", "15:00 - 16:00", "After 20:00"]
    };
  },
  created() {
    let that = this;
    asCore.getContext(userData => {
      this.user = userData; 
      if (userData.take_time) {
        that.startTime = userData.take_time.split("-")[0];
        that.endTime = userData.take_time.split("-")[1];
      }
      if (userData.receive_time) {
        that.startTime1 = userData.take_time.split("-")[0];
        that.endTime1 = userData.take_time.split("-")[1];
      }
    });
  },
  methods: {
    changeAddress(msg) {
      this.addressData = msg.data;
    },
    confirm() {
      let that=this;
      if (!this.startTime || !this.endTime) {
        this.toast("please set Visit time");
        return false;
      }
      if (!this.startTime1 || !this.endTime1) {
        this.toast("please set Delivery time");
        return false;
      }
      this.isLoading = true;
      edit_users_info(
        {
          users_id: this.user.users_uuid,
          take_time: this.startTime + "-" + this.endTime,
          receive_time: this.startTime1 + "-" + this.endTime1
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
             
            this.toast(res.message);
            if (res.code == 200) {
              const updateImg = new BroadcastChannel("updateImg");
              updateImg.postMessage("update");
              setTimeout(() => {
                that.back()
              }, 500);
            }
          }
        }
      );
    },
    setAddress() {
      this.push("root:app/user/address/address.js");
    },
    toPay() {
      this.push("root:app/pay/payment.js");
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
}

.locationBox {
  width: 750px;
  /* border-bottom-style: solid;
		border-bottom-color: #e6e6e6;
		border-bottom-width: 2px; */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 104px;
  padding: 0 32px;
  margin-bottom: 20px;
  background-color: #ffffff;
}
.locationBox:active {
  background-color: #f2f2f2;
}
.meth_title {
  color: #323232;
  font-size: 30px;
  width: 230px;
}

.meth_right {
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.timeInput {
  padding: 0 10px;
  background-color: #eee;
  height: 50px;
  width: 150px;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
}
.line {
  font-size: 24px;
  margin: 0 20px;
  text-align: center;
}
.cityName {
  margin-right: 30px;
  font-size: 28px;
  color: #999999;
  flex: 1;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}

.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 500px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  position: fixed;
  left: 0;
  bottom: -500px;
  width: 750px;
  height: 500px;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 32px;
  flex-direction: column;
}

.alertTop {
  width: 686px;
  text-align: center;
  padding-bottom: 32px;
  font-size: 28px;
  color: #333333;
  height: 70px;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input{
  -webkit-appearance: none;
}
 
input[type="number"] {
    -moz-appearance: textfield;
    
} 
.indicator {
  width: 40px;
  height: 40px;
}
.sureBtn {
  width: 686px;
  height: 74px;
  line-height: 74px;
  position: absolute;
  bottom: 50px;
  border-radius: 10px;
  margin-left: 32px;
  /* margin-bottom: 15px; */
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.sureBtn:active {
  background-color: #222;
}

</style>
